Accessibility

This page is Accessibility(a11y) friendly! It's dynamic in size, and when made to view as mobile it has a navigation header with proper accessibility concerns and a proper focus trap. Deque axe reports no a11y violations except some false positives due to layering and hiding.

Angular

I already have a strong background in React, so I did this in Angular since I haven't used Angular in a few years since the Angular 2 release candidates. That mobile navigation was hard to make a11y friendly and a lot has changed since then.

Testing

This application was made to use Jest and Testing Library, which I've written an article for on Unicorn Utterances. This made it really easy to make sure that every page and feature has coverage.

Styles

This application uses TailwindCSS for its styles. It's designed mobile-first and "grows up" from there. I learned it using this app and I like it a lot!

Browser Support

Remember Microsoft's own words. IE11 isn't a browser anymore it's a compatibility solution. So I don't support it. If you try to render this page in IE it only explains that.

Semantic HTML

The only div elements you'll find are part of the Angular CDK FocusTrap. All the HTML is semantic.

Check it out on GitHub!

You can peruse the code on the GitHub repo for this application by following the link in the header!